import React, { useState } from "react";
import axios from "axios";

interface TestAxiosProps {
  url: string;
}

const TestAxios: React.FC<TestAxiosProps> = ({ url }) => {
  const [data, setData] = useState<string>("");
  const [, setLoading] = useState<boolean>(false);

  const fetchData = async () => {
    setLoading(true);
    try {
      const response = await axios.get<{ greeting: string }>(url);
      console.log(response);
      setData(response.data.greeting);
    } catch (error) {
      console.error("Error fetching data:", error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
      <button onClick={fetchData} data-testid="fetch-data">
        Load Data
      </button>
      {data ? (
        <div data-testid="show-data">{data}</div>
      ) : (
        <h1 data-testid="loading">Loading...</h1>
      )}
    </>
  );
};

export default TestAxios;
